<template>
  <div id="bind">
    <div class="bind-tip">
      <div class="bind-tip-card">
        <div class="tip-inner">
          <p class="tip-title">当前采用社保卡作为“一码通”</p>
          <p class="tip-title">请先申领实体社保卡后再申领一码通</p>
        </div>
        <div class="tip-subTitle">
          您当前未申领一码通请先进行一码通申领，系统会自动为您开通主要民生领域相关服务，除此之外，还需要您确认开通医疗，卫生等领域的应用
        </div>
        <div class="tip-img">
          <img src="../../assets/img/ling.png" width="100%" />
        </div>
      </div>
      <div @click="checkCard" class="bind-btn">
        <p class="bind-btn-text">去申领</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getSSCApplyInfo, getSSCSign } from "@/apis/test";
import { storage } from "../../plugins/storage";
import * as types from "../../store/mutation-types";
import config from "@/views/test/config";

export default {
  data() {
    return {};
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.api.getCard().then(res => {
        this.$store.dispatch("cards", res.data);
      });
    },
    async checkCard() {
      let res = await getSSCApplyInfo();
      if (res && res.data) {
        this.apply(res.data);
      }
    },
    apply(data) {
      let url = location.href.split("bind")[0] + "success";
      // let uri = url.substring(0, url.indexOf("#")) + "#/success";
      let params = {
        channelNo: data.channelNo,
        returnUrl: url,
        isWeb: "1"
      };
      getSSCSign(params).then(res => {
        location.href = `${config.sscServer}/main?${res.data}`;
      });
    }
  }
};
</script>

<style lang="less">
#bind {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("../../assets/img/bind_bg.png");
  background-size: 100% 100%;

  .bind-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .bind-tip-card {
      background: #fff;
      width: 325px;
      height: 230px;
      border-radius: 10px;
      position: relative;

      .tip-inner {
        padding: 40px 25px 22px 25px;

        .tip-title {
          font-size: 16px;
          color: #4663ff;
          text-align: center;
          padding: 4px 0;
        }
      }
      .tip-subTitle {
        padding: 0 20px 0 20px;
        font-size: 14px;
        color: #666666;
        text-align: justify;
        text-align: center;
        line-height: 24px;
      }
      .tip-img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -25px;
        width: 50px;
        height: 50px;
      }
    }

    .bind-btn {
      width: 160px;
      margin: 15px auto 0 auto;
      background: #4663ff;
      text-align: center;
      border-radius: 50px;
      .bind-btn-text {
        font-size: 16px;
        color: #fff;
        padding: 15px 0;
      }
    }
  }
}
p {
  margin: 0;
  padding: 0;
}
</style>
